<template>
  <div class="p-20">
    <div class="tile-card ribbon-warpper p-20">
      <div class="ribbon">已送达</div>
      <div class="mt-20 detail">
        <div class="flex flex_wrap mt-20">
          <div class="flexitem mb-20">订单编号：10000000123456789</div>
          <div class="flexitem mb-20">创建时间：2024-09-23 10:32:23</div>
          <div class="flexitem mb-20">完成时间：2024-09-23 10:32:23</div>
        </div>
      </div>
    </div>
    <div class="tile-card mt-20 p-20">
      <div class="header">订单流程</div>
      <el-divider />
      <div class="pb-10">
        <el-steps align-center :active="3" simple>
          <el-step :icon="Order" title="创建订单" />
          <el-step :icon="Shopping" title="仓库拣货" />
          <el-step :icon="Outbound" title="仓库发货" />
          <el-step :icon="RightUser" title="用户收货" />
          <el-step :icon="ThumbsUp" title="用户评价" />
          <el-step :icon="DoneAll" title="订单完成" />
        </el-steps>
      </div>
    </div>
    <div class="tile-card mt-20 p-20">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="订单详情" name="order" :icon="Order">
          <div class="detail flex flex_wrap mt-20">
            <div class="flexitem mb-20">订单状态：<el-tag type="success">已送达</el-tag></div>
            <div class="flexitem mb-20">收货时间：2024-09-23 10:32:23</div>
            <div class="flexitem mb-20">订单总价（¥）：{{ priceAll }}</div>
            <div class="flexitem mb-20">订单备注：吴彦祖的快递，请优先配送😊</div>
          </div>
          <el-table border size="large" :data="tableData" show-summary :summary-method="summaryMethod">
            <el-table-column label="商品编号" prop="number" width="150" />
            <el-table-column label="商品名称" prop="name" />
            <el-table-column label="商品单价（¥）" prop="price" width="150" align="center" />
            <el-table-column label="购买数量" prop="count" width="150" align="center" />
            <el-table-column label="价格（¥）" width="150" align="center" prop="all">
              <template #default="{ row }">
                {{ row.price * row.count }}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="用户信息" name="user" :icon="User">
          <div class="user p-10">
            <div class="header">用户信息</div>
            <div class="detail flex flex_wrap mb-20 mt-20 tables">
              <div class="flexitem"><span>用户昵称</span><span>吴彦祖安徽分祖</span></div>
              <div class="flexitem"><span>联系电话</span><span>13800000000</span></div>
              <div class="flexitem"><span>收货地址</span><span>安徽省合肥市经开区吴彦祖大厦1001</span></div>
            </div>
            <el-divider line-style="dashed" />
            <div class="header">消费数据</div>
            <div class="detail proportion flex flex_wrap mt-20">
              <div class="flexitem">
                <div>用户本月消费金额</div>
                <div class="nums">¥ <span>9999</span></div>
              </div>
              <div class="flexitem">
                <div>消费次数较上月环比</div>
                <div class="nums"><span>15%</span> <TrendingUp fill="#ed4014" /></div>
              </div>
              <div class="flexitem">
                <div>消费金额较上月环比</div>
                <div class="nums"><span>8%</span> <TrendingDown fill="#22c55e" /></div>
              </div>
            </div>
            <el-divider line-style="dashed" />
            <div class="header">常购商品分类</div>
            <ul class="ul">
              <li>
                <span>衣物</span>
                <el-progress type="dashboard" :percentage="50" color="#5cb87a" />
              </li>
              <li>
                <span>水果零食</span>
                <el-progress type="dashboard" :percentage="25" color="#ffcd43" />
              </li>
              <li>
                <span>家电</span>
                <el-progress type="dashboard" :percentage="15" color="#cf4545" />
              </li>
              <li>
                <span>其它</span>
                <el-progress type="dashboard" :percentage="10" color="#909399" />
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="物流详情" name="logistics" :icon="Truck">
          <div class="p-10 logistics">
            <div class="header mt-20 mb-20">
              <el-avatar :size="24" class="mr-10">物</el-avatar>
              XXX快递 {{ logistics.logistics_order }}
            </div>
            <el-timeline>
              <el-timeline-item :timestamp="item.timestamp" v-for="item in logistics.status_updates.toReversed()">
                <div class="title">{{ item.status }}</div>
                <div class="desc">{{ item.description }}</div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>
        <el-tab-pane label="数据统计" name="charts" :icon="Analysis">
          <sales-volume />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import {
  Order,
  CheckOne,
  Truck,
  User,
  Outbound,
  Shopping,
  RightUser,
  ThumbsUp,
  DoneAll,
  TrendingUp,
  TrendingDown,
  Analysis
} from '@icon-park/vue-next';
import salesVolume from './components/sales-volume.vue';

const tableData = [
  {
    number: '123456789',
    name: '商品1',
    price: 13.25,
    count: 5
  },
  {
    number: '123456789',
    name: '商品3',
    price: 18.25,
    count: 1
  },
  {
    number: '123456789',
    name: '商品7',
    price: 23.5,
    count: 2
  },
  {
    number: '123456789',
    name: '商品2',
    price: 3,
    count: 25
  }
];
const priceAll = computed(() => {
  return tableData.reduce((sum, acc) => {
    return (sum += acc.count * acc.price);
  }, 0);
});

const summaryMethod = ({ columns, data }) => {
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '总计';
      return;
    }
    if (column.property === 'all') {
      sums[index] = priceAll.value;
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!Number.isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0);
    } else {
      sums[index] = 'N/A';
    }
  });
  return sums;
};

const activeName = ref('order');

const logistics = {
  order_id: '10000000123456789',
  logistics_order: 'ORD123456',
  status_updates: [
    {
      status: '订单已创建',
      description: '客户成功下单，订单信息已录入系统，待处理。',
      timestamp: '2024-09-20T09:00:00Z',
      location: '系统后台'
    },
    {
      status: '订单处理中',
      description: '订单正在进行准备工作，包括商品拣选和包装。',
      timestamp: '2024-09-20T10:00:00Z',
      location: '仓库'
    },
    {
      status: '订单已发货',
      description: '订单已交由物流公司，快递单号已生成并分配。',
      timestamp: '2024-09-21T08:00:00Z',
      location: '物流中心'
    },
    {
      status: '运输中',
      description: '包裹在途，正在由快递员运输至目的地。',
      timestamp: '2024-09-21T12:00:00Z',
      location: '运输途中'
    },
    {
      status: '派送中',
      description: '快递员已到达客户所在区域，正在进行派送。',
      timestamp: '2024-09-22T09:30:00Z',
      location: '派送地址'
    },
    {
      status: '已送达',
      description: '包裹已成功送达客户手中，订单完成。',
      timestamp: '2024-09-22T11:00:00Z',
      location: '客户地址'
    }
  ]
};
</script>

<style scoped lang="scss">
.ribbon-warpper {
  position: relative;
  padding-top: 40px;
}
.ribbon {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  --f: 0.5em;
  --r: 0.8em;

  position: absolute;
  top: 10px;
  left: calc(-1 * var(--f));
  padding-inline: 0.25em;
  line-height: 1.8;
  background: var(--el-color-success);
  border-bottom: var(--f) solid #0005;
  border-right: var(--r) solid #0000;
  clip-path: polygon(
    0 0,
    0 calc(100% - var(--f)),
    var(--f) 100%,
    var(--f) calc(100% - var(--f)),
    100% calc(100% - var(--f)),
    calc(100% - var(--r)) calc(50% - var(--f) / 2),
    100% 0
  );
}
.detail {
  font-size: 14px;
  color: #999;
}

.header {
  font-size: 18px;
  font-weight: 900;
  color: var(--el-text-color-primary);
  display: flex;
  align-items: center;
}
.flexitem {
  flex-grow: 0;
  width: 33.33%;
  line-height: 32px;
}

.logistics {
  color: var(--el-text-color-primary);

  .title {
    font-weight: 700;
  }
  .desc {
    color: #999;
    font-size: 14px;
  }
}

.nums {
  margin-top: 10px;
  font-size: 14px;

  > span {
    font-size: 24px;
    font-weight: 900;
    color: #e100ff;
  }
}

.tables {
  .flexitem {
    margin-left: -1px;
    display: flex;
    border: 1px solid var(--admin-border-color);

    > span {
      padding: 4px 10px;
    }
    > span:first-child {
      background-color: #f6f6f6;
      width: 30%;
      border-right: 1px solid var(--admin-border-color);
    }
  }
}

.proportion {
  .flexitem {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.ul {
  display: flex;

  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;

    > span {
      margin-bottom: 10px;
      color: #999;
      font-size: 14px;
    }
  }
}
</style>
